<template>
	<view class="content">
		<view class="title-text">
			<text class="">你好，</br>欢迎登录绿地安全卫士</text>
		</view>
		<view :class="showFunc?'login_func_noclick':'login_func'" @click="showFunc=!showFunc">
			<text class="code_login">验证码登录</text>
			<text class="password_login">密码登录</text>
		</view>
		<view class="photo">
			<fui-input placeholder="请输入手机号" :clearable="true" v-model="userPhone"></fui-input>
		</view>
		<view class="password" v-show="!showFunc">
			<fui-input :padding="['20rpx','32rpx']" placeholder="请输入密码" :bottomLeft="0" :password="!showPwd"
				:clearable="true" v-model="password">
				<fui-icon name="invisible" :size="48" v-if="!showPwd" @click="showPassword()"></fui-icon>
				<fui-icon name="visible" :size="48" v-if="showPwd" @click="showPassword()"></fui-icon>
			</fui-input>
			<u--text text="忘记密码？" class="forget-text" @click="forget()"></u--text>
		</view>
		<view class="password" v-show="showFunc">
			<fui-input :padding="['20rpx','32rpx']" placeholder="清输入验证码" :bottomLeft="0" 
				:clearable="true" v-model="loginCode">
				<fui-button type="gray" bold width="200rpx" height="64rpx" color="#348669" :size="28" text="获取验证码" @click="getCode()" v-show="showGetCodeTime"></fui-button>
				<fui-button type="gray" bold width="200rpx" height="64rpx" color="#b3f0c7" :size="28" :text="getCodeTime+'秒'" v-show="!showGetCodeTime"></fui-button>
			</fui-input>
		</view>
		<view class="login-btn">
			<u-button class="custom-style" @click="login()">登录</u-button>
		</view>
		<view class="regiest-text">
			<text @click="showOtherLogin()">其他登录</text><span @click="naviToRegiest()">注册</span>
		</view>
		<fui-actionsheet :show="showOLogin" :isCancel="true" :itemList="itemList" @click="otherLogin"
			@cancel="isntShow"></fui-actionsheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '',
				showPwd: false,
				showOLogin: false,
				itemList: [
					'微信', 'QQ'
				],
				userPhone: '',
				password: '',
				showFunc:true,
				showGetCodeTime:true,
				getCodeTime:10,
				loginCode:''
			}
		},
		onLoad() {
			uni.stopPullDownRefresh();
		},
		methods: {
			getCode(){
				if(this.userPhone==''){
					this.$utils.errorMsg("手机号码不能为空")
					return
				}
				// 设置获取验证码冷却
				this.showGetCodeTime=false
				this.$http.loginCode(this.userPhone).then(sucess=>{
					console.log(sucess)
					this.loginCode=sucess.data
					this.$utils.msg("模拟短信验证码:"+sucess.data)
				}).catch(error=>{
					this.$utils.errorMsg(error.msg)
				})
				var timer = setInterval( () => {
					this.getCodeTime--
					if(this.getCodeTime<=0){
						this.showGetCodeTime=true
						clearInterval(timer)
						this.getCodeTime=10
					}
				}, 1000)
				
			},
			login() {
				let user = {
					"phone": this.userPhone,
					"password": this.password,
					"userId":this.loginCode
				}
				console.log(user)
				this.codeOrPwd()
				// 调用登录api
				this.$http.login(user).then(response => {
					// 登录成功后,储存user信息,以后session失效的时候重新自动登录
					this.$storage.set("loginUser",user)
					// 请求用户数据
					this.$http.httpGet("user/findUserByPhone/" + this.userPhone, '').then(response => {
						this.$storage.setJson("user",response.data.data)
						//获取用户的绿地信息
						this.$http.httpPost('green/findAllByRole',response.data.data).then(sucess=>{
							console.log("用户上传的绿地信息:",sucess)
							if(sucess.data.status==200){
								this.$storage.set("greenLandAll" ,sucess.data.data)
							}
						})
						// 成功后跳转
						this.$utils.reLaunch("../reLaunch/reLaunch?id=index")
					}).catch(err=>{
						console.log(err)
						// this.$utils.reLaunch("../reLaunch/reLaunch?id=person")
					})
				}).catch(error => {
					this.$utils.msg(error.data.msg)
					if(error.data.data==null){
						this.$utils.msg("验证码已过期，请重新获取")
						return
					}
					console.log(error)
				})
			},
			// 放弃的方法,以后改进
			// getBase64ThroughUserPhotoUrl(userUrl){
			// 	let url ={'userPhotoUrl':userUrl}
			// 	this.$http.httpGet('user/getBase64ThroughUserPhotoUrl',url).then(upSuccess=>{
			// 		this.$storage.set('userPhotoUrl',upSuccess.data.data)
					
			// 	}).catch(error=>{
			// 		this.$utils.msg(error.data.msg)
					
			// 		console.log(error)
			// 	})
					
			// },
			showPassword() {
				this.showPwd = !this.showPwd
			},
			showOtherLogin() {
				this.showOLogin = !this.showOLogin
			},
			otherLogin(obj) {
				console.log(obj)
				this.$utils.msg(obj.text)
			},
			isntShow() {
				this.showOLogin = !this.showOLogin
			},
			naviToRegiest() {
				this.$utils.navigateTo("ModelPage/regiest", "")
			},
			forget() {
				this.$http.httpGet("login/user", "").then(response => {
					console.log(response)
				})
			},
			codeOrPwd(){
				if(this.showFunc){
					this.password=''
				}else{
					this.loginCode=''
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #ffffff;
		height: 100%;
		width: 100%;
	}

	.content {
		margin: 20rpx;
	}

	.title-text {
		margin: 40rpx;
		margin-left: 30rpx;
		font-size: 50rpx;
		font-weight: bolder;
		line-height: 80rpx;
		margin-bottom: 150rpx;
	}
	.login_func_noclick{
		display: flex;
		align-items: center;
		justify-content: center;
		text{
			margin: 20px;
		}
		.code_login{
			color: #348669;
		}
		margin-bottom: 10px;
	}
	.login_func{
		display: flex;
		align-items: center;
		justify-content: center;
		text{
			margin: 20px;
		}
		.password_login{
			color: #348669;
		}
		margin-bottom: 10px;
	}
	.photo {
		// margin-top: 150rpx;
	}

	.password {
		margin-top: 50rpx;
	}

	.forget-text {
		position: absolute;
		left: 75%;
	}

	.login-btn {
		margin-top: 200rpx;

	}

	.regiest-text {
		margin-top: 100rpx;
		margin-left: 250rpx;

		span {
			margin-left: 50rpx;
			color: #007AFF;
		}
	}

	.custom-style {
		@include modules-btn;
		margin: 20rpx 0;
		box-shadow: 0 0 5px #919191;
		width: 100%;
		border-radius: 96px;
		height: 100rpx;
	}
</style>
